<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <!-- 一级分类 -->
      <el-select v-model="courseVo.classGrade" placeholder="年级" @change="classGradeChanged">
        <el-option
          v-for="grade in coursesAndGrade.grades"
          :key="grade"
          :label="grade"
          :value="grade"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>

      <!-- 一级分类 -->
      <el-select v-model="courseVo.courseName" placeholder="所授课程" @change="courseChanged">
        <el-option
          v-for="course in coursesAndGrade.courseNames"
          :key="course"
          :label="course"
          :value="course"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>

      <el-button type="primary" icon="el-icon-search" @click="makeData()" plain>生成统计数据</el-button>
      <el-button type="primary" icon="el-icon-search" @click="showData()" plain>展示图表</el-button>

      <!-- <el-button type="primary" icon="el-icon-search" @click="getCharts()" plain>生成及格信息统计数据</el-button>
      <el-button type="primary" icon="el-icon-search" @click="setCakeChart()" plain>展示图表</el-button>

      <el-button type="success" icon="el-icon-search" @click="getLineCharts()" plain>生成分数信息统计数据</el-button>
      <el-button type="success" icon="el-icon-search" @click="setLineChart()" plain>展示图表</el-button> -->
    </el-form>
    <el-divider>
      <i class="el-icon-mobile-phone"></i>
    </el-divider>
    <div class="chart-container">
      <div id="cakeChart" class="chart" style="height:400px;width:100%"/>
    </div>
    <div class="chart-container">
      <div id="chart" class="chart" style="height:400px;width:100%"/>
    </div>
  </div>
</template>


<script>
import org from "@/api/organization/organization.js"; //.js可以省略
import stu from "@/api/personnel/student";
import sc from "@/api/score/score";
import echarts from "echarts";

export default {
  //2、写核心代码位置
  //data两种写法：
  // data:{
  // },
  data() {
    //定义数据变量和初始值
    return {
      cakeChart:null,
      chart: null,
      title: "",
      stadata: [],
      coursesAndGrade: [],
      courseVo: {},
      //这里属性名可以自己起
      list: null, //查询之后接口返回集合
      total: 0,
      page: 1, //当前页
      limit: 30, //每页显示记录数
      studentDto: {}, //条件封装对象
      item: {},
      dialogFormVisible: false,
      // departmentList: {},
      // oneLevelList: {},
      // twoLevelList: {},
      // teacherDto: {},
      sysClassinfos: {}, //所有专业下的班级
      sysScore: {},
      scoreInfoDto: {}, //查询成绩录入回显
      xData: [],
      yData: []
    };
  },
  created() {
    this.getTeacherCourse();
  },
  methods: {
    makeData(){
this.getCharts()
this.getLineCharts()
    },
    showData(){
this.setCakeChart()
this.setLineChart()
    },

    //获取当前老师有哪些课程
    getTeacherCourse() {
      sc.getTeacherCourse()
        .then(response => {
          this.coursesAndGrade = response.data.coursesAndGrade;
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
    },
    getList(page = 1) {
      this.page = page;

      sc.pageScore(this.page, this.limit, this.courseVo)
        .then(response => {
          //response接口返回的数据
          // console.log(response)
          //6、打印返回的测试数据
          this.list = response.data.records; //records是后端接口返回的值
          this.total = response.data.total;
          //   console.log(this.list);
          //   console.log(this.total);
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
    },

    //饼图显示及格与不及格
    getCharts() {
      sc.createCharts(this.courseVo).then(response => {
        this.stadata = response.data.stadata;
        this.$message({
          type: "success",
          message: "已生成统计数据，请查看!"
        });
        // console.log(this.stadata)
      });
    },
    setCakeChart() {
      this.cakeChart = echarts.init(document.getElementById("cakeChart"));

      var option = {
        title: {
          text: "及格信息统计",
          subtext: "课程：" + this.courseVo.courseName,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "访问来源 -> " + this.courseVo.classGrade + " 级",
            type: "pie",
            radius: "50%",
            data: this.stadata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.cakeChart.setOption(option);
    },
    //折现图
    getLineCharts() {
      sc.createLineCharts(this.courseVo).then(response => {
        this.xData = response.data.stuNames;
        this.yData = response.data.scores;
        // this.$message({
        //   type: "success",
        //   message: "已生成统计数据，请查看!"
        // });
        // console.log(this.stadata)
      });
    },
    setLineChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // console.log(this.chart)

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.courseVo.courseName+' 课程 分数统计'
        },
        tooltip: {
          trigger: "axis"
        },
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: "category",
          data: this.xData
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: "value"
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // 系列中的数据内容数组
            data: this.yData,
            // 折线图
            type: "line"
          }
        ],
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ]
      };

      this.chart.setOption(option);
    }
  }
};
</script>
